<template>
  <el-dialog :title="'查询列表'" append-to-body
             :visible="open"
             :close-on-click-modal="false"
             width="80%"
             class="dialog_collect"
             @open="handleOpenDialog"
             @close="handleCloseDialog">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="船舶列表" name="boat">
        <el-form :model="queryParams1" ref="queryForm1" :inline="true" label-width="68px">
          <el-form-item label="船名" prop="shipName">
            <el-input
              v-model="shipName"
              :value="fullShipName"
              placeholder="请输入船名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery('boat')"
            />
          </el-form-item>
          <el-form-item label="船舶编码" prop="shipCode">
            <el-input
              v-model="queryParams1.shipCode"
              placeholder="请输入船舶编码"
              clearable
              size="small"
              @keyup.enter.native="handleQuery('boat')"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery('boat')">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery('boat')">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="shipList">
          <el-table-column label="主建id" align="center" prop="id" v-if="false"/>
          <el-table-column label="数据状态" align="center" prop="state"/>
          <el-table-column label="船名" align="center" prop="shipName"/>
          <el-table-column label="船舶所有人名称" align="center" prop="pensionName"/>
          <el-table-column label="船舶编码" align="center" prop="shipCode"/>
          <el-table-column label="船长" align="center" prop="captain"/>
          <el-table-column label="辖区代码" align="center" prop="jurisdictionCode"/>
          <el-table-column label="主机总功率" align="center" prop="power"/>
          <el-table-column label="作业类型" align="center" prop="workType"/>
          <el-table-column label="联系电话" align="center" prop="contactNumber"/>
          <el-table-column label="所有人证件号" align="center" prop="certificateNumber"/>
          <el-table-column label="船舶类型" align="center" prop="shipType" :formatter="shipTypeFormat"/>
        </el-table>
        <pagination
          v-show="totalShip>0"
          :total="totalShip"
          :page.sync="queryParams1.pageNum"
          :limit.sync="queryParams1.pageSize"
          @pagination="getList('boat')"
        />
      </el-tab-pane>
      <el-tab-pane label="人员列表" name="user">
        <el-form :model="queryParams2" ref="queryForm2" :inline="true" label-width="68px">
          <el-form-item label="用户账号" prop="userName">
            <el-input
              v-model="queryParams2.userName"
              placeholder="请输入用户账号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery('user')"
            />
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="queryName"
              :value="fullQueryName"
              placeholder="请输入姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery('user')"
            />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="queryParams2.sex" placeholder="请选择性别" clearable size="small">
              <el-option
                v-for="dict in sexOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery('user')">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery('user')">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="appUserList">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="主建id" align="center" prop="id" v-if="false"/>
          <el-table-column label="用户账号" align="center" prop="userName"/>
          <el-table-column label="姓名" align="center" prop="name"/>
          <el-table-column label="身份证号码" align="center" prop="idcard"/>
          <el-table-column label="性别" align="center" prop="sex" :formatter="sexFormat"/>
          <el-table-column label="身体状况" align="center" prop="physical"/>
          <el-table-column label="联系方式" align="center" prop="phonenumber"/>
          <el-table-column label="职位" align="center" prop="position" :formatter="positionFormat"/>
          <el-table-column label="操作" align="center" v-if="isSave" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleSave(scope.row)"
                v-hasPermi="['basicInformation:appUser:edit']"
              >下派
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalUser>0"
          :total="totalUser"
          :page.sync="queryParams2.pageNum"
          :limit.sync="queryParams2.pageSize"
          @pagination="getList('user')"
        />
      </el-tab-pane>
    </el-tabs>
    <section slot="footer" class="dialog-footer">
      <el-button @click="handleCloseDialog">关 闭</el-button>
    </section>
    <event-run :open="showEvent"
               @closed="closeEvent"
               @closedAll="closedAll"
               :alarmId="alarmId"
               :receiveObjectId="receiveObjectId"
               :basicInfo="basicInfo"
    ></event-run>
  </el-dialog>
</template>

<script>
  import {listUserCurrentPoint} from '@/api/basicInformation/appUser'
  import {currentPoint} from '@/api/basicInformation/ship'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import eventRun from '@/views/onemap/List/eventRun'
  import TyCoordinateConvert from "../../../plugin/map/TyCoordinateConvert";

  export default {
    name: 'tabsBA',
    components: {
      eventRun
    },
    props: {
      isSave: {
        type: Boolean,
        default: true
      },
      open: {
        type: Boolean,
        default: false
      },
      runUserList: {
        type: Object,
        default: () => {
          return {}
        }
      },
      runBoatList: {
        type: Object,
        default: () => {
          return {}
        }
      },
      alarmId: {
        type: Number,
        default: 0
      },
      eventId: {
        type: Number,
        default: 0
      },
      isEvent: {
        type: Boolean,
        default: false
      },
      x: {
        type: Number,
        default: 0
      },
      y: {
        type: Number,
        default: 0
      },
      keys: {
        type: String,
        default: undefined
      },
      extent: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    watch: {
      runUserList: {
        handler(val) {
          this.queryParams2 = this.runUserList
        }
      },
      runBoatList: {
        handler(val) {
          this.queryParams1 = this.runBoatList
        }
      },
      shipName: {
        handler(val) {
          this.$emit('keysHandler', val)
        }
      },
      queryName: {
        handler(val) {
          this.$emit('keysHandler', val)
        }
      }
    },
    data() {
      return {
        shipName: '',
        queryName: '',
        activeName: 'boat',
        // 遮罩层
        loading: true,
        // 总条数
        totalShip: 0,
        totalUser: 0,
        // APP用户表格数据
        appUserList: [],
        shipList: [],
        // 性别字典
        sexOptions: [],
        // 船舶类型字典
        shipTypeOptions: [],
        // 查询参数
        queryParams2: {
          pageNum: 1,
          pageSize: 10,
          userName: undefined,
          name: undefined,
          sex: undefined,
          userType: 2,
          maxX: 0,
          maxY: 0,
          minX: 0,
          minY: 0
        },
        queryParams1: {
          pageNum: 1,
          pageSize: 10,
          shipType: '2',
          maxX: 0,
          maxY: 0,
          minX: 0,
          minY: 0,
          shipName: undefined,
          shipCode: undefined
        },
        // 表单参数
        form: {},
        showEvent: false,
        receiveObjectId: 0,
        basicInfo: {}
      }
    },
    computed: {
      getKeys: function () {
        return this.keys
      },
      fullShipName: function () {
        this.shipName = this.getKeys
        return this.keys
      },
      fullQueryName: function () {
        this.queryName = this.getKeys
        return this.keys
      }
    },
    methods: {
      handleClick(tab, event) {
        switch (tab.name) {
          case 'boat':
            this.getList('boat')
            break
          case 'user':
            this.getList('user')
            break
        }
        console.log('this.activeName===>', this.activeName)
      },
      handleOpenDialog() {
        this.activeName = 'boat'
        this.getList('boat')
        this.getDicts('sys_user_sex').then(response => {
          this.sexOptions = response.data
        })
        this.getDicts('app_s_post').then(response => {
          this.positionOptions = response.data
        })
        this.getDicts('ship_type').then(response => {
          this.shipTypeOptions = response.data
        })
      },
      handleCloseDialog() {
        // this.open = false
        this.$emit('closeDialog', 'tabs')
      },
      /** 查询APP用户列表 */
      getList(e) {
        let gcj = {}
        let bd09 = {}
        switch (e) {
          case 'boat':
            this.queryParams1.pageNum = 1
            this.loading = true
            this.queryParams1.shipName = this.shipName
            const carParams = {...this.queryParams1}
            if (this.extent.length > 0) {
              gcj = TyCoordinateConvert.gcj_encrypt(this.extent[1], this.extent[0])
              bd09 = TyCoordinateConvert.bd_encrypt(gcj.lat, gcj.lon)
              carParams.minX = bd09.lon
              carParams.minY = bd09.lat
              gcj = TyCoordinateConvert.gcj_encrypt(this.extent[3], this.extent[2])
              bd09 = TyCoordinateConvert.bd_encrypt(gcj.lat, gcj.lon)
              carParams.maxX = bd09.lon
              carParams.maxY = bd09.lat
            }
            currentPoint(carParams).then(response => {
              this.shipList = response.rows
              this.totalShip = response.total
              this.loading = false
            })
            break
          case 'user':
            this.queryParams2.pageNum = 1
            this.loading = true
            this.queryParams2.name = this.queryName
            const userParams = {...this.queryParams2}
            if (this.extent.length > 0) {
              gcj = TyCoordinateConvert.gcj_encrypt(this.extent[1], this.extent[0])
              bd09 = TyCoordinateConvert.bd_encrypt(gcj.lat, gcj.lon)
              userParams.minX = bd09.lon
              userParams.minY = bd09.lat
              gcj = TyCoordinateConvert.gcj_encrypt(this.extent[3], this.extent[2])
              bd09 = TyCoordinateConvert.bd_encrypt(gcj.lat, gcj.lon)
              userParams.maxX = bd09.lon
              userParams.maxY = bd09.lat
            }
            listUserCurrentPoint(userParams).then(response => {
              this.appUserList = response.rows
              this.totalUser = response.total
              this.loading = false
            })
            break
        }
      },
      // 性别字典翻译
      sexFormat(row, column) {
        return this.selectDictLabel(this.sexOptions, row.sex)
      },
      // 职位字典翻译
      positionFormat(row, column) {
        return this.selectDictLabel(this.positionOptions, row.position)
      },
      // 船舶类型字典翻译
      shipTypeFormat(row, column) {
        return this.selectDictLabel(this.shipTypeOptions, row.shipType)
      },
      /** 搜索按钮操作 */
      handleQuery(e) {
        switch (e) {
          case 'boat':
            this.queryParams1.pageNum = 1
            break
          case 'user':
            this.queryParams2.pageNum = 1
            break
        }
        this.getList(e)
      },
      /** 重置按钮操作 */
      resetQuery(e) {
        switch (e) {
          case 'boat':
            this.resetForm('queryForm1')
            break
          case 'user':
            this.resetForm('queryForm2')
            break
        }
        this.handleQuery(e)
      },
      handleSave(row) {
        if (this.alarmId > 0) {
          this.showEvent = true
          this.basicInfo = {
            alarmId: this.alarmId,
            receiveObjectId: row.userId,
            reporterObjectName: row.name,
            x: this.x,
            y: this.y
          }
        } else if (this.eventId > 0 && this.isEvent) {
          this.$emit('getUserId', row.userId)
          // 案件下派逻辑
          this.msgSuccess('触发案件下派逻辑')
        } else {
          this.msgSuccess('还没有选择报警信息，请先定位报警信息')
        }
      },
      closeEvent() {
        this.showEvent = false
      },
      closedAll() {
        this.showEvent = false
        this.$emit('closeDialog', 'tabs')
      }
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-dialog__footer {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -65px !important;
    padding: 15px;
    background: #f1f1f1;
  }

  ::v-deep .pagination-container {
    padding: 0 !important;
  }
</style>
